<template>
    <div>
        <aside>
            <ul>
                <li v-for="item of mainMerchant.menu" class="aside">
                    <a :href="'#'+item.maoName">{{item.asideName}}</a>
                </li>
            </ul>
        </aside>
        <div class="order">
            <ul>
                <li v-for="item of mainMerchant.menu" class="dishes">
                    <p :id="item.maoName" class="maoTiao">{{item.asideName}}</p>
                    <hr>
                    <div v-for="dish of item.dishes" class="dishDiv">
                        <img :src="dish.dishPic" alt="">
                        <div class="allDish">
                            <p class="foodName">{{dish.foodName}}</p>
                            <p class="xiangQing">{{dish.xiangQing}}</p>
                            <p class="foodMonthSale">月售{{dish.foodMonthSale}}</p>
                            <p class="haoPing">好评{{dish.haoPing}}%</p>
                            <br>
                            <p class="daZhe">{{dish.daZhe}}折</p>
                            <br>
                            <p class="xianJia">￥{{dish.xianJia}}</p>
                            <p class="yuanJia">{{dish.yuanJia}}</p>
                            <button type="submit">+</button>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div style="width: 100vw;height: 50px"></div>

</template>

<script>


    export default {
        name: "MerchantOrder",
        props: ["mainMerchant"],
        data(){
            return {
                tot:""
            }
        },
        methods:{
            addShop(key){
                this.tot++;
                this.shopList[key].currentNum++;
                if(this.shopList[key].currentNum > 0){
                    this.shopList[key].showStatus = true;
                }
            }
        }

    }
</script>

<style scoped>
    aside {
        width: 80px;
        height: 1000px;
        float: left;
        background: #f5f5f5;
        position: sticky;
        top: 0;
    }

    .order {
        background-color: #fff;
        margin-left: 80px;
    }

    a {
        margin: 0;
        padding: 0;
        color: #000;
        font-size: 14px;
    }

    .aside {
        margin-top: 20px;

    }

    .maoTiao {
        height: 20px;
        margin: 5px;
    }

    .dishDiv {
        height: 120px;
        margin-top: 10px;
        margin-left: 5px;
    }

    p {
        margin: 0;
        padding: 0;
        display: inline-block;
    }

    img {
        width: 100px;
        height: 100px;
        border-radius: 5px;
        float: left;
        text-align: center;
        margin-right: 5px;
        margin-top: 5px;
    }

    .allDish {
        display: inline-block;
        width: 200px;
    }

    .foodName {
        font-size: 14px;
    }

    .xiangQing {
        font-size: 12px;
        color: #aca9a9;
        display: block;
    }

    .foodMonthSale {
        font-size: 12px;
        color: #aca9a9;
        margin-right: 5px;
    }

    .haoPing {
        font-size: 12px;
        color: #aca9a9;
    }

    .daZhe {
        width: 45px;
        height: 15px;
        border: 1px solid #ff7700;
        font-size: 12px;
        color: #ff7700;
        text-align: center;
    }

    .xianJia {
        font-size: 14px;
        color: red;
        margin-right: 5px;
    }

    .yuanJia {
        font-size: 12px;
        color: #aca9a9;
        text-decoration: line-through;

    }
</style>